<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot-超级文件带师-登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
</head>
<style>
    .el-header, .el-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-color: white;
        color: #333;
        text-align: center;
    }
    .el-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-color: white;
        color: #333;
        text-align: center;
    }
    .box-card{
        line-height: 30px;
    }
    body{
        margin: 0px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>
<body>
<div id="content" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
    <el-container style="width: 90%;max-width: 700px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
        <el-header style="border-top-right-radius: 25px;border-top-left-radius: 25px;"><h1>超级文件带师</h1></el-header>

        <el-main>
            <el-form ref="form" :model="form" label-width="80px" >
                <el-form-item label="账号：">
                    <el-input  v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input @keyup.enter.native="login" v-model="form.passwd" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                <el-button style="max-width: 200px;" type="primary" round @click="login">立即登录</el-button>
            </div>

        </el-main>
        <el-footer style="border-bottom-right-radius: 25px;border-bottom-left-radius: 25px;">SpringBoot-SuperDir - power by xiaoxi</el-footer>
    </el-container>
</div>

<script>
    var app = new Vue({
        el: '#content',
        data: {
            form:{
                username:"",
                passwd:""
            }
        },
        mounted:function(){

        },
        methods:{
            login:function(){
                axios.get('Dir_login',{
                    params: {
                        username:app.form.username,
                        password:app.form.passwd
                    }
                })
                    .then(res => {
                        console.log('数据是:', res);
                        if(res.data.data){
                            this.$message({
                                message: '登录成功！',
                                type: 'success'
                            });
                            window.location.href="index.html";
                        }else{
                            this.$message.error({
                                message: '登录失败！'
                            });
                        }
                    })
                    .catch((e) => {
                        console.log('获取数据失败');
                    });
            },
            goto:function(item){
                window.open('upload.html?id='+item.id);
            },
        }
    })
</script>

</body>
</html>